<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="content-type" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
    <title>个人信息</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/element/index.css">
    <link rel="stylesheet" href="../css/hsg.css">
</head>
<body>
<div id="wrapper" v-cloak>
    <div >
        <div style="padding: 0 20px">
            <div>
                <div style="color: #666; font-weight: bold; border-bottom: 1px solid #ccc; padding: 10px 0; margin-bottom: 20px; font-size: 30px;">修改个人信息</div>
            </div>

            <div style="margin-top: 10px">
                <div style="border: 1px solid #19a97b;">
                    <div style="padding: 5px; border-bottom: 1px solid #19a97b; color: white; background-color: #19a97b;">修改个人信息</div>
                    <div style="border: 1px solid #ccc; padding: 10px">
                        <div class="row">
                            <div class="col-md-12">
                                <form class="form-horizontal">
                                    <input type="hidden" v-model="entity.id">
									<div  class="form-group"><label class="col-sm-3 control-label">账号</label><div class="col-sm-7"><input type="text" class="form-control" v-model="entity.username" style="width: 160px" placeholder="请输入账号" id="username"></div></div>
		<div  class="form-group"><label class="col-sm-3 control-label">密码</label><div class="col-sm-7"><input type="text" class="form-control" v-model="entity.pwd" style="width: 160px" placeholder="请输入密码" id="pwd"></div></div>
		<div  class="form-group"><label class="col-sm-3 control-label">姓名</label><div class="col-sm-7"><input type="text" class="form-control" v-model="entity.names" style="width: 160px" placeholder="请输入姓名" id="names"></div></div>
		<div  class="form-group"><label class="col-sm-3 control-label">性别</label><div class="col-sm-7"><select class="form-control" v-model="entity.gender"><option value="男">男</option><option value="女">女</option></select></div></div>
		<div  class="form-group"><label class="col-sm-3 control-label">年龄</label><div class="col-sm-7"><input type="text" class="form-control" v-model="entity.age" style="width: 160px" placeholder="请输入年龄" id="age"></div></div>
		<div  class="form-group"><label class="col-sm-3 control-label">电话</label><div class="col-sm-7"><input type="text" class="form-control" v-model="entity.tel" style="width: 160px" placeholder="请输入电话" id="tel"></div></div>
		<div  class="form-group"><label class="col-sm-3 control-label">余额</label><div class="col-sm-7"><input type="text" class="form-control" v-model="entity.yue" style="width: 160px" placeholder="请输入余额" id="yue"></div></div>
		<div  class="form-group"><label class="col-sm-3 control-label">照片</label> <div class="col-sm-7"> <el-upload  class="avatar-uploader" action="/files/upload"  :show-file-list="false"  :on-success="picsccs"   :before-upload="picbaul"> <img v-if="picimrl" :src="picimrl" class="avatar"><img v-else-if="picavt" :src="'/files/download/'+picavt" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload> </div></div>
		
                                </form>
                                <div style="text-align: center">
                                    <button type="button" class="btn btn-primary" v-on:click="update()">保存</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/my.js"></script>
<script src="../js/vue2.6.11/vue.min.js"></script>
<script src="../js/vue2.6.11/axios.js"></script>
<script src="../js/element/index.js"></script>

<script>
    function checkValid(entity) {
        if (!entity.username || entity.username === "") {alert("账号不能为空"); return false;}
if (!entity.pwd || entity.pwd === "") {alert("密码不能为空"); return false;}
if (entity.tel && entity.tel !== ""){let reg = /^[1][3,4,5,7,8][0-9]{9}$/; if (!reg.test(entity.tel)) {alert("请输入正确的电话");return false;}}
if (entity.yue && entity.yue !== ""){let reg = /^[0-9]+.?[0-9]*$/; if (!reg.test(entity.yue)) {alert("余额必需数字型");return false;}}

        return true;
    }

    new Vue({
        el: '#wrapper',
        data: {
            authority: [],
            permission: [],
            storeUser: JSON.parse(localStorage.getItem("user")),
            // gonghao: '',
            //xingming:'',
            user: {},

			picimrl: '',
//youtupianimrl			
            objs: [],
            pageInfo: {},
            preActive: true,
            nextActive: true,
			picavt:null,
//youtupianavt			
			//youxia2sui
			//youxxiabiaoxduan
            entity: {

            }
        },
        created: function () {
            this.loadData();
            axios.get("/authority").then(res => {
                if (res.data.code === '0') {
                    this.authority = res.data.data;
                } else {
                    msg('error', res.data.msg);
                }
            });

            this.user = JSON.parse(localStorage.getItem('user'));
			//youcreatexia2sui
			//youffxiaxbiaoxduan

        },

        methods: {
            loadData() {
                axios.get("/getAccountInfo").then(res => {
                    if (res.data.code === '0') {
                        this.entity = res.data.data;
                        if(this.entity.pic) {this.picavt = JSON.parse(this.entity.pic)[0];}
                            //tupianloadtb
                    } else {
                        msg('error', res.data.msg);
                    }
                });

            },

            update() {
                if (checkValid(this.entity)) {
                    axios.put(
                        "/signinusersInfo", this.entity
                    ).then(res => {
                        if (res.data.code === '0') {
                            msg('success', '更新成功');
                            this.loadData();
                        } else {
                            msg('error', res.data.msg);
                        }
                    })
                }
            },
            picsccs(res, file) {
                this.picimrl = URL.createObjectURL(file.raw);
                this.entity.picflst.push(res.data.id);
                this.picavt = res.data.id
            },
            picbaul(file) {
                this.entity.picflst = [];
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2000MB!');
                }
                return isJPG && isLt2M;
            },
			//m_tupiansccsbaul
            //logout() {
            //    logout();
            //}
        }
    })
</script>
</body>
</html>
